import React, { Component } from 'react';
import OrderItem from '../OrderItem';

// const data = [
//     {
//         id: 1,
//         shop: '思味特甜艺坊',
//         picture: require('../../images/dangao.jpg'),
//         product: '美少女战士蛋糕6寸',
//         price: 89,
//         ifCommendted: true,
//     },
//     {
//         id: 2,
//         shop: '觅泰Tai',
//         picture: require('../../images/dongyingong.jpg'),
//         product: '冬阴功分享锅',
//         price: 159,
//         ifCommendted: false,
//     },
//     {
//         id: 3,
//         shop: '巴依老爷',
//         picture: require('../../images/yangxiezi.jpg'),
//         product: '双人羊蝎子麻辣锅',
//         price: 199,
//         ifCommendted: false,
//     },
//     {
//         id: 4,
//         shop: '江边城外',
//         picture: require('../../images/kaoyu.jpg'),
//         product: '3斤清江鱼/酱香',
//         price: 149,
//         ifCommendted: true,
//     }
// ]
export default class OrderList extends Component {

    constructor(props) {
        super(props)
    
        this.state = {
            orders: []
        };
    }
    

    componentDidMount() {
        fetch('/mock/orders.json').then(res => {
            if(res.ok) {
                res.json().then(data => {
                    this.setState({
                        orders: data
                    });
                })
            }
        })
    }

    render() {
        return (
            <div>
                {
                    this.state.orders.map(item => {
                        return <OrderItem key={item.id} order={item} onSubmit={this.handleSubmit}/>
                    })
                }
            </div>
        );
    }

    handleSubmit = (id, comment, stars) => {
        // todo: 保存评价
        // fetch('saveComment').then(() =>{
        // })
        const newData = this.state.orders.map(item => {
            return item.id === id 
            ? {
                ...item,
                comment, 
                stars, 
                ifCommendted: true
            }: item;
        });
        setTimeout(console.log(newData), 3000);
        console.log(newData);
        this.setState({
            orders: newData
        });
    }
}
